<template>
	<view class="detailLayout">
		<view class="detail" v-if="noticeDetail">
			<view class="title">
				<view class="tag" v-if="noticeDetail.select">
					<uni-tag inverted text="置顶" type="error" />
				</view>
				<view class="text">
					<text>{{ noticeDetail.title }}</text>
				</view>
			</view>
			<view class="author">
				<text class="text">{{ noticeDetail.author }}</text>
				<uni-dateformat :date="noticeDetail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
			<view class="content">
				<rich-text :nodes="noticeDetail.content"></rich-text>
			</view>
			<view class="viewCount">阅读 {{ noticeDetail.view_count }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		apiGetNoticeDetail
	} from "@/api/apis.js";
	import {
		ref
	} from "vue";
	onLoad((e) => {
		noticeId.value = e.id;
		getNoticeDetail();
	});
	const noticeId = ref(null);
	const noticeDetail = ref(null);
	const getNoticeDetail = async () => {
		let res = await apiGetNoticeDetail({
			id: noticeId.value,
		});
		noticeDetail.value = res.data;
	};
</script>

<style lang="scss" scoped>
	.detailLayout {
		.detail {
			padding: 30rpx;
			width: 100%;

			.title {
				display: flex;

				.tag {
					width: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-right: 20rpx;
				}

				.text {
					width: 600rpx;
					font-size: 38rpx;
				}
			}

			.author {
				padding: 30rpx 0;
				color: #999;

				.text {
					padding-right: 30rpx;
				}
			}

			.content {}

			.viewCount {
				padding: 30rpx 0;
				color: #999;
			}
		}
	}
</style>